<template>
  <!-- 币种组件 -->
  <el-select
    v-model="svalue"
    v-bind="$props"
    :clearable="false"
    :disabled="disabled"
    :placeholder="$t(placeholder)"
    :popper-append-to-body="false"
    @change="handleBlur"
    @blur="handleBlur"
  >
    <el-option
      v-for="item in currencyOptions"
      :key="item.dictValue"
      :label="$t(item.dictLabel)"
      :value="item.dictValue"
    />
  </el-select>
</template>

<script>
import { getBusById } from '@/api/file/fileBase.js'

export default {
  name: 'Currency',
  props: {
    value: {
      type: String,
      default: ''
    },
    busId: {
      type: String,
      default: () => ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    }
  },
  data: function() {
    return {
      svalue: this.value,
      currencyOptions: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal !== undefined && newVal !== null && newVal !== '') {
          this.svalue = newVal
          this.handleBlur()
        } else {
          // 获取项基本信息币种
          this.getBaseCurrency()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getDicts('currency').then(response => {
      this.currencyOptions = response.data
    })
  },
  methods: {
    handleBlur() {
      this.$emit('input', this.svalue)
      this.$emit('change', this.svalue)
    },
    getBaseCurrency() {
      getBusById(this.busId ? this.busId : this.$route.query.id).then(res => {
        if (res.data !== null && res.data.currency !== null) {
          this.svalue = res.data.currency
          this.handleBlur()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
